<!-- Main Content -->
<div class="main-content">
    <section class="section">

        <div class="section-header">

            <h1><span class="small">{i18n{ manager.categoryEdit }i18n} - {{detail.uid}}</span></h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item"><a href="../list"> {i18n{back}i18n} {i18n{ manager.sidebar_category }i18n}</a></div>
            </div>

        </div>
        <div class="section-body">
            <div class="row justify-content-center">


            <div class="col-12 col-lg-10 col-xl-8">

                <form class="my-3">


                    <div class="row">

                        <div class="col-6 col-md-6">

                            <div class="form-group a-field valid require" a-field-type="input" a-field-length="32" a-field-name="title">

                                <label>
                                    {i18n{ manager.title }i18n} *
                                </label>

                                <input type="text" class="form-control a-field-main" value="{{detail.title}}">

                            </div>
                        </div>


                        <div class="col-12">

                            <div class="form-group a-field valid" a-field-type="input" a-field-length="64" a-field-name="description">

                                <label>
                                    {i18n{ manager.description }i18n}
                                </label>

                                <input type="text" class="form-control a-field-main" value="{{detail.description}}">

                            </div>
                        </div>


                    </div>



                    <div class="form-group a-field valid" a-field-switch="cover,gallery,video,audio" a-field-type='input' a-field-length="255" a-field-name="cover" id="uploadContainer">

                        <label class="mb-1">{i18n{ manager.cover }i18n} ({i18n{ manager.coverFormat }i18n})</label>

                        <small class="form-text text-muted">
                            {i18n{ manager.coverDescription }i18n}
                        </small>

                        <div class="card">
                            <div class="card-body">

                                <div>
                                    <img id="imagePreview" src="{{detail.cover}}" alt="..." class="rounded a-w-10">
                                </div>

                                <div class="input-group my-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="cover-url">{i18n{url}i18n}:</span>
                                    </div>
                                    <input id="image" type="text" disabled="disabled" class="form-control a-field-main" placeholder="{i18n{ manager.chooseFileTip }i18n}" value="{{detail.cover}}" readonly aria-describedby="cover-url">
                                </div>

                                <input class="btn btn-sm btn-secondary" type="button" id="broseImage" value="{i18n{ manager.chooseFile }i18n}">

                                <input class="btn btn-sm btn-outline-info" type="button" id="clearImage" value="{i18n{ manager.clear }i18n}" onclick="VD('#image').value('SET_NULL')">

                            </div>
                        </div>

                    </div>



                    <hr class="mt-5 mb-5">

                    <div class="row">

                        <div class="col-12 col-md-6 mb-3">
                            <button type="button" class="btn btn-block btn-primary" onclick="MANAGER.update( null,'{{detail.uid}}', 'Category', MANAGER.chooseCall )">
                                <i class="far fa-save"></i> {i18n{ manager.update }i18n}
                            </button>
                        </div>


                    </div>

                </form>

            </div>

        </div></div>

    </section>
</div>